import T from 'utils/T';
import { PureComponent } from 'react';
import './index.scss';
import Carousel from './carousel';
export default class Wheel extends PureComponent{
    componentDidMount() {
        let box = this.box;
        const data = [
            '交通运输部路网中心', '海上搜救中心', '公安部交通管理局', '公安部消防局', '公安部消防局',
            '交通运输部路网中心', '海上搜救中心', '公安部交通管理局', '公安部消防局', '公安部消防局',
            '交通运输部路网中心', '海上搜救中心', '公安部交通管理局', '公安部消防局', '公安部消防局',
            '交通运输部路网中心', '海上搜救中心', '公安部交通管理局', '公安部消防局', '公安部消防局',
            '交通运输部路网中心', '海上搜救中心', '公安部交通管理局', '公安部消防局', '公安部消防局',
        ];
        const dataSource = [
            {
                "产品名称": "紫外线等级预报",
                "所属行业": "卫生健康",
                "联合发布单位": null,
                "服务用户": "外交部礼宾司,交通运输部路网中心、公安部交通管理局公路刑警处,交通运输部路网中心、安部交通管理局公路刑警处"
            },
            {
                "产品名称": "全国主要公路气象预报",
                "所属行业": "交通",
                "联合发布单位": "交通运输部",
                "服务用户": "交通运输部路网中心、公安部交通管理局公路刑警处、国家旅游局全国假日旅游部际协调会议办公室、中石油交通预报"
            },
            {
                "产品名称": "风能太阳能资源年景公报",
                "所属行业": "能源电力",
                "联合发布单位": null,
                "服务用户": "新能源行业"
            },
            {
                "产品名称": "重大公路气象预警",
                "所属行业": "交通",
                "联合发布单位": "交通运输部",
                "服务用户": "交通运输部路网中心"
            },
            {
                "产品名称": "风能预报产品",
                "所属行业": "能源电力",
                "联合发布单位": null,
                "服务用户": "新能源行业"
            },
            {
                "产品名称": "交通气象决策产品",
                "所属行业": "交通",
                "联合发布单位": null,
                "服务用户": "交通运输部路网中心、海上搜救中心、公安部交通管理局、公安部消防局、中国人民武装警察部队交通指挥部、民政部救灾司"
            },
            {
                "产品名称": "太阳能预报产品",
                "所属行业": "能源电力",
                "联合发布单位": null,
                "服务用户": "新能源行业"
            },
            {
                "产品名称": "全国公路交通气象监测产品",
                "所属行业": "交通",
                "联合发布单位": null,
                "服务用户": "交通运输部路网中心"
            },
            {
                "产品名称": "电力相关产品为",
                "所属行业": "能源电力",
                "联合发布单位": null,
                "服务用户": "电力企业"
            },
            {
                "产品名称": "公路交通气象要素精细化预报产品",
                "所属行业": "交通",
                "联合发布单位": null,
                "服务用户": "交通运输部路网中心"
            },
            {
                "产品名称": "降水实况",
                "所属行业": "保险",
                "联合发布单位": null,
                "服务用户": "人保"
            },
            {
                "产品名称": "春运全国主要公路气象预报",
                "所属行业": "交通",
                "联合发布单位": "交通运输部",
                "服务用户": "交通运输部路网中心、公安部交通管理局公路刑警处、国家旅游局全国假日旅游部际协调会议办公室"
            },
            {
                "产品名称": "灾害预警",
                "所属行业": "保险",
                "联合发布单位": null,
                "服务用户": "人保"
            },
            {
                "产品名称": "天气公报",
                "所属行业": "交通",
                "联合发布单位": null,
                "服务用户": "铁路总公司"
            },
            {
                "产品名称": "台风",
                "所属行业": "保险",
                "联合发布单位": null,
                "服务用户": "人保"
            },
            {
                "产品名称": "气象灾害预警",
                "所属行业": "交通",
                "联合发布单位": null,
                "服务用户": "铁路总公司"
            },
            {
                "产品名称": "雷达产品",
                "所属行业": "交通",
                "联合发布单位": null,
                "服务用户": "铁路总公司"
            },
            {
                "产品名称": "全国森林火险气象预报",
                "所属行业": "火险",
                "联合发布单位": "森林火险预警产品与国家林业草原局联合发布",
                "服务用户": "国家林业草原局森林防火指挥办公室预警处、中保"
            },
            {
                "产品名称": "未来一周全国森林火险气象预报",
                "所属行业": "火险",
                "联合发布单位": null,
                "服务用户": "国家林业草原局森林防火指挥办公室预警处"
            },
            {
                "产品名称": "全国草原火险气象预报",
                "所属行业": "火险",
                "联合发布单位": null,
                "服务用户": "国家林业草原局草原防火办"
            },
            {
                "产品名称": "火场气象服务专报",
                "所属行业": "火险",
                "联合发布单位": "森林火险预警产品与国家林业草原局联合发布",
                "服务用户": "国家林业草原局"
            },
            {
                "产品名称": "森林火险决策服务",
                "所属行业": "火险",
                "联合发布单位": null,
                "服务用户": "国家林业草原局"
            },
            {
                "产品名称": "草原火险决策产品",
                "所属行业": "火险",
                "联合发布单位": null,
                "服务用户": "国家林业草原局草原防火办"
            },
            {
                "产品名称": "短期天气预报",
                "所属行业": "水利",
                "联合发布单位": null,
                "服务用户": "松辽委"
            },
            {
                "产品名称": "天气图",
                "所属行业": "水利",
                "联合发布单位": null,
                "服务用户": "松辽委"
            },
            {
                "产品名称": "高温中暑气象预报",
                "所属行业": "卫生健康",
                "联合发布单位": null,
                "服务用户": "卫生部中国疾病预防控制中心"
            },
            {
                "产品名称": "全国省会城市紫外线预报",
                "所属行业": "卫生健康",
                "联合发布单位": null,
                "服务用户": "公众"
            }
        ];


        this.Carousel = new Carousel($(this.wheelBox), {
            curDisplay: 0,
            autoPlay: true,
            interval: 20,  // 秒单位
            data: this.formateData(dataSource),
        }, $(this.box), {
            curDisplay: 0,
            autoPlay: true,
            interval: 4000, // 毫秒单位
            boxName: 'listInner',
            itemName: 'item',
        });

    }

    formateData = (data) => {
        let nameList = [];
        let newData = [];
        data.forEach(item => {
            let index = nameList.indexOf(item['所属行业']);
            if (index !== -1) {
                newData[index].data = T.lodash.uniq(newData[index].data.concat(item['服务用户'].split('、')));
            } else {
                nameList.push(item['所属行业']);
                newData.push({
                    name: item['所属行业'],
                    data: item['服务用户'].split('、')
                });
            }
        });
        return {
            nameList,
            listData: newData
        };
    };

    render() {

        return (<div className="wheelBox">
            <div className="list">
                <div className="listOuter" ref={e => this.box = e}>

                </div>
            </div>
            <div className="wheel" ref={wheel => this.wheelBox = wheel}>

            </div>
            <div className="projectCount">
                <div className="num">3223</div>
                <div className="label"><span>能源电力</span>数量</div>
            </div>
            <div className="imgBox">
                <img src={require('./img/交通.png')} alt=""/>
            </div>
        </div>);
    }
}
